<template>
    <div>
        <!-- 分配 -->
        <el-dialog
          title="分配订单"
          :visible.sync="dialogVisible"
          width="20%"
          :before-close="handleClose">
          <el-form :inline="true" :model="carForm" class="demo-form-inline">
              <el-form-item label="司机" style="margin-left: 30px;">
                  <el-select v-model="carForm.driver" placeholder="请选择" @change="getCar()" filterable>
                      <el-option
                        v-for="item in drivers"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="车辆" style="margin-left: 30px;">
                  <el-select v-model="carForm.car" placeholder="请选择" filterable>
                      <el-option
                        v-for="item in cars"
                        :key="item.id"
                        :label="item.number"
                        :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-form> 
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="divide()">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 查看订单信息 -->
        <el-dialog
          title="订单详细信息"
          :visible.sync="dialogVisible2"
          width="80%"
          :before-close="handleClose2">
          <el-descriptions title="订单的基础信息" direction="vertical" :column="5" border>
            <el-descriptions-item label="起始地">{{ form.start }}</el-descriptions-item>
            <el-descriptions-item label="目的地">{{ form.end }}</el-descriptions-item>
            <el-descriptions-item label="是否需要上门提货">{{ form.isCollect }}</el-descriptions-item>
            <el-descriptions-item label="提货时间">{{ form.requiredDate }}</el-descriptions-item>
            <el-descriptions-item label="货品类型">{{ form.itemType }}</el-descriptions-item>
            <el-descriptions-item label="客户单号">{{ form.customerNo }}</el-descriptions-item>
            <el-descriptions-item label="面单号">{{ form.trackingNumber }}</el-descriptions-item>
            <el-descriptions-item label="货源单号">{{ form.orderNumber }}</el-descriptions-item>
            <el-descriptions-item label="订单备注">{{ form.remark }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="发货方信息" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="名称">{{ form.shipperName }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ form.shipperLinkMan }}</el-descriptions-item>
            <el-descriptions-item label="联系手机">{{ form.shipperPhone }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ form.shipperTelephone }}</el-descriptions-item>
            <el-descriptions-item label="客户编码">{{ form.shipperCustomerCode }}</el-descriptions-item>
            <el-descriptions-item label="合同签订主体">{{ form.shipperContractSubject }}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ form.shipperProjectName }}</el-descriptions-item>
            <el-descriptions-item label="发货地址">{{ form.shippingAddress }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="收货方信息" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="名称">{{ form.consigneeName }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ form.consigneeLinkMan }}</el-descriptions-item>
            <el-descriptions-item label="联系手机">{{ form.consigneePhone }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ form.consigneeTelephone }}</el-descriptions-item>
            <el-descriptions-item label="收货地址">{{ form.deliveryAddress }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="货品信息" direction="vertical" :column="12" border style="margin-top: 10px;">
            <template v-for="(item,index) in form.productData">
                <el-descriptions-item label="货品名称" :key="index">{{ item.name }}</el-descriptions-item>
                <el-descriptions-item label="包装" :key="index">{{ item.pack }}</el-descriptions-item>
                <el-descriptions-item label="数量(件)" :key="index">{{ item.number }}</el-descriptions-item>
                <el-descriptions-item label="毛重(吨)" :key="index">{{ item.grossWeight }}</el-descriptions-item>
                <el-descriptions-item label="净重(吨)" :key="index">{{ item.netWeight }}</el-descriptions-item>
                <el-descriptions-item label="体积(方)" :key="index">{{ item.volume }}</el-descriptions-item>
                <el-descriptions-item label="申明价值(元)" :key="index">{{ item.claimingValue }}</el-descriptions-item>
                <el-descriptions-item label="客户批次" :key="index">{{ item.customerBatch }}</el-descriptions-item>
                <el-descriptions-item label="长(M)" :key="index">{{ item.length }}</el-descriptions-item>
                <el-descriptions-item label="宽(M)" :key="index">{{ item.width }}</el-descriptions-item>
                <el-descriptions-item label="高(M)" :key="index">{{ item.height }}</el-descriptions-item>
                <el-descriptions-item label="备注" :key="index">{{ item.remark }}</el-descriptions-item>
            </template>
          </el-descriptions>
          <el-descriptions title="费用信息" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="运输费">{{ form.transportation }}</el-descriptions-item>
            <el-descriptions-item label="保险费">{{ form.premium }}</el-descriptions-item>
            <el-descriptions-item label="代收款">{{ form.cod }}</el-descriptions-item>
            <el-descriptions-item label="代收款费用">{{ form.collectionFee }}</el-descriptions-item>
            <el-descriptions-item label="包装费">{{ form.packing }}</el-descriptions-item>
            <el-descriptions-item label="上楼费">{{ form.upstairsFee }}</el-descriptions-item>
            <el-descriptions-item label="装赁费">{{ form.rentalFee }}</el-descriptions-item>
            <el-descriptions-item label="卸货费">{{ form.discharge }}</el-descriptions-item>
            <el-descriptions-item label="提货费">{{ form.pickChange }}</el-descriptions-item>
            <el-descriptions-item label="中转费">{{ form.interchangeFee }}</el-descriptions-item>
            <el-descriptions-item label="送货费">{{ form.deliveryFee }}</el-descriptions-item>
            <el-descriptions-item label="仓储费">{{ form.godownChange }}</el-descriptions-item>
            <el-descriptions-item label="燃油附加费">{{ form.fuelSurcharge }}</el-descriptions-item>
            <el-descriptions-item label="其他费用">{{ form.otherCharge }}</el-descriptions-item>
            <el-descriptions-item label="其他费用说明">{{ form.explain }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="付款方式" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="现付">{{ form.cashPayment }}</el-descriptions-item>
            <el-descriptions-item label="回付">{{ form.backPayment }}</el-descriptions-item>
            <el-descriptions-item label="到付">{{ form.carriageForward }}</el-descriptions-item>
            <el-descriptions-item label="周期付">{{ form.periodicPayment }}</el-descriptions-item>
            <el-descriptions-item label="预付">{{ form.advance }}</el-descriptions-item>
          </el-descriptions>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 修改订单信息 -->
        <el-dialog
          title="修改订单信息"
          :visible.sync="dialogVisible3"
          width="80%"
          :before-close="handleClose3">
          <el-descriptions title="订单的基础信息" direction="vertical" :column="5" border>
            <el-descriptions-item label="起始地"><el-input v-model="form.start"/></el-descriptions-item>
            <el-descriptions-item label="目的地"><el-input v-model="form.end"/></el-descriptions-item>
            <el-descriptions-item label="是否需要上门提货">
                <el-select v-model="form.isCollect" size="mini">
                  <el-option label="需要上门提货" value="需要上门提货"/>
                  <el-option label="不需要上门提货" value="不需要上门提货"/>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="提货时间">
                <el-date-picker
                    size="mini"
                    style="width: 176px;"
                    v-model="form.requiredDate"
                    type="datetime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item label="货品类型">
                <el-select v-model="form.itemType" size="mini">
                  <el-option label="普通货物" value="普通货物"/>
                  <el-option label="特殊货物" value="特殊货物"/>
                  <el-option label="杂件货物" value="杂件货物"/>
                  <el-option label="危险货物" value="危险货物"/>
                  <el-option label="散装货物" value="散装货物"/>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="客户单号"><el-input v-model="form.customerNo"/></el-descriptions-item>
            <el-descriptions-item label="面单号"><el-input v-model="form.trackingNumber"/></el-descriptions-item>
            <el-descriptions-item label="货源单号"><el-input v-model="form.orderNumber"/></el-descriptions-item>
            <el-descriptions-item label="订单备注"><el-input v-model="form.remark"/></el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="发货方信息" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="名称"><el-input v-model="form.shipperName"/></el-descriptions-item>
            <el-descriptions-item label="联系人"><el-input v-model="form.shipperLinkMan"/></el-descriptions-item>
            <el-descriptions-item label="联系手机"><el-input v-model="form.shipperPhone"/></el-descriptions-item>
            <el-descriptions-item label="联系电话"><el-input v-model="form.shipperTelephone"/></el-descriptions-item>
            <el-descriptions-item label="客户编码"><el-input v-model="form.shipperCustomerCode"/></el-descriptions-item>
            <el-descriptions-item label="合同签订主体">
                <el-select v-model="form.shipperContractSubject" placeholder="请选择" size="mini" filterable @change="getInfo()">
                    <el-option
                      v-for="item in agreements"
                      :key="item.id"
                      :label="item.number"
                      :value="item.id">
                    </el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="项目名称"><el-input v-model="form.shipperProjectName"/></el-descriptions-item>
            <el-descriptions-item label="发货地址"><el-input v-model="form.shippingAddress"/></el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="收货方信息" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="名称"><el-input v-model="form.consigneeName"/></el-descriptions-item>
            <el-descriptions-item label="联系人"><el-input v-model="form.consigneeLinkMan"/></el-descriptions-item>
            <el-descriptions-item label="联系手机"><el-input v-model="form.consigneePhone"/></el-descriptions-item>
            <el-descriptions-item label="联系电话"><el-input v-model="form.consigneeTelephone"/></el-descriptions-item>
            <el-descriptions-item label="收货地址"><el-input v-model="form.deliveryAddress"/></el-descriptions-item>
          </el-descriptions>
          <div>
              <el-button type="primary" style="float: right;margin-bottom: 5px;" icon="el-icon-plus" @click="appendContact()"></el-button>
              <el-descriptions title="货品信息" direction="vertical" :column="13" border style="margin-top: 10px;">
                <template v-for="(item,index) in form.productData">
                    <el-descriptions-item label="货品名称" :key="index"><el-input v-model="item.name"/></el-descriptions-item>
                    <el-descriptions-item label="包装" :key="index"><el-input v-model="item.pack"/></el-descriptions-item>
                    <el-descriptions-item label="数量(件)" :key="index"><el-input v-model="item.number"/></el-descriptions-item>
                    <el-descriptions-item label="毛重(吨)" :key="index"><el-input v-model="item.grossWeight"/></el-descriptions-item>
                    <el-descriptions-item label="净重(吨)" :key="index"><el-input v-model="item.netWeight"/></el-descriptions-item>
                    <el-descriptions-item label="体积(方)" :key="index"><el-input v-model="item.volume"/></el-descriptions-item>
                    <el-descriptions-item label="申明价值(元)" :key="index"><el-input v-model="item.claimingValue"/></el-descriptions-item>
                    <el-descriptions-item label="客户批次" :key="index"><el-input v-model="item.customerBatch"/></el-descriptions-item>
                    <el-descriptions-item label="长(M)" :key="index"><el-input v-model="item.length"/></el-descriptions-item>
                    <el-descriptions-item label="宽(M)" :key="index"><el-input v-model="item.width"/></el-descriptions-item>
                    <el-descriptions-item label="高(M)" :key="index"><el-input v-model="item.height"/></el-descriptions-item>
                    <el-descriptions-item label="备注" :key="index"><el-input v-model="item.remark"/></el-descriptions-item>
                    <el-descriptions-item label="操作" :key="index"><el-button type="danger" icon="el-icon-delete" circle @click="remove(index)"></el-button></el-descriptions-item>
                </template>
              </el-descriptions>
          </div>
          <el-descriptions title="费用信息" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="运输费"><el-input v-model="form.transportation"/></el-descriptions-item>
            <el-descriptions-item label="保险费"><el-input v-model="form.premium"/></el-descriptions-item>
            <el-descriptions-item label="代收款"><el-input v-model="form.cod"/></el-descriptions-item>
            <el-descriptions-item label="代收款费用"><el-input v-model="form.collectionFee"/></el-descriptions-item>
            <el-descriptions-item label="包装费"><el-input v-model="form.packing"/></el-descriptions-item>
            <el-descriptions-item label="上楼费"><el-input v-model="form.upstairsFee"/></el-descriptions-item>
            <el-descriptions-item label="装赁费"><el-input v-model="form.rentalFee"/></el-descriptions-item>
            <el-descriptions-item label="卸货费"><el-input v-model="form.discharge"/></el-descriptions-item>
            <el-descriptions-item label="提货费"><el-input v-model="form.pickChange"/></el-descriptions-item>
            <el-descriptions-item label="中转费"><el-input v-model="form.interchangeFee"/></el-descriptions-item>
            <el-descriptions-item label="送货费"><el-input v-model="form.deliveryFee"/></el-descriptions-item>
            <el-descriptions-item label="仓储费"><el-input v-model="form.godownChange"/></el-descriptions-item>
            <el-descriptions-item label="燃油附加费"><el-input v-model="form.fuelSurcharge"/></el-descriptions-item>
            <el-descriptions-item label="其他费用"><el-input v-model="form.otherCharge"/></el-descriptions-item>
            <el-descriptions-item label="其他费用说明"><el-input v-model="form.explain"/></el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="付款方式" direction="vertical" :column="5" border style="margin-top: 10px;">
            <el-descriptions-item label="现付"><el-input v-model="form.cashPayment"/></el-descriptions-item>
            <el-descriptions-item label="回付"><el-input v-model="form.backPayment"/></el-descriptions-item>
            <el-descriptions-item label="到付"><el-input v-model="form.carriageForward"/></el-descriptions-item>
            <el-descriptions-item label="周期付"><el-input v-model="form.periodicPayment"/></el-descriptions-item>
            <el-descriptions-item label="预付"><el-input v-model="form.advance"/></el-descriptions-item>
          </el-descriptions>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </span>
        </el-dialog>
        <el-table
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="shipperProjectName"
              fixed
              width="200"
              label="项目名称">
            </el-table-column>
            <el-table-column
              prop="start"
              width="150"
              label="起始地">
            </el-table-column>
            <el-table-column
              prop="end"
              width="150"
              label="目的地">
            </el-table-column>
            <el-table-column
              prop="isCollect"
              width="120"
              label="是否上门提货">
            </el-table-column>
            <el-table-column
              width="180"
              prop="requiredDate"
              label="提货时间">
            </el-table-column>
            <el-table-column
              prop="itemType"
              width="120"
              label="货物类型">
            </el-table-column>
            <el-table-column
              prop="remark"
              width="280"
              label="备注">
            </el-table-column>
            <el-table-column
              prop="shipperLinkMan"
              width="130"
              label="发货方联系人">
            </el-table-column>
            <el-table-column
              prop="shipperPhone"
              width="180"
              label="发货方联系电话">
            </el-table-column>
            <el-table-column
              prop="shippingAddress"
              width="260"
              label="发货地址">
            </el-table-column>
            <el-table-column
              prop="shipperCustomerCode"
              width="150"
              label="客户编码">
            </el-table-column>
            <el-table-column
              prop="consigneeLinkMan"
              width="130"
              label="收货方联系人">
            </el-table-column>
            <el-table-column
              prop="consigneePhone"
              width="180"
              label="收货方联系电话">
            </el-table-column>
            <el-table-column
              prop="deliveryAddress"
              width="260"
              label="收货地址">
            </el-table-column>
            <el-table-column
              fixed="right"
              width="250"
              label="操作">
              <template slot-scope="scope">
                 <el-button type="text" icon="el-icon-s-grid" @click="openDivide(scope.row)">分配</el-button>
                 <el-button type="text" icon="el-icon-view" @click="openView(scope.row.id)" style="color: #67C23A;">查看</el-button>
                 <el-button type="text" icon="el-icon-edit" @click="openUpdate(scope.row.id)" style="color: #E6A23C;">修改</el-button>
                 <el-button type="text" icon="el-icon-delete" @click="del(scope.row.id)" style="color: red;">删除</el-button>
              </template>    
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 10px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import request from '../../../utils/request.js'
    export default {
        methods: {
            appendContact() {
              const newData = {
                    name:'',
                    pack:'',
                    number:"0",
                    grossWeight:"0.00000",
                    netWeight:"0.00000",
                    volume:"0.000",
                    claimingValue:"0.00",
                    customerBatch:'',
                    long:"0.00",
                    width:"0.00",
                    height:"0.00",
                    remark:''
              };
              this.form.productData.splice(0, 0, newData);
            },
            remove(val) {
                this.$confirm('您确定要删除该条货品信息吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                   this.form.productData.splice(val, 1);
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });    
            },
            handleSizeChange(val) {
                this.size = val;
                this.load();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.load();
            },
            handleClose() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible = false;
              })
            },
            handleClose2() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible2 = false;
              })
            },
            handleClose3() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible3 = false;
              })
            },
            load() {
                request.get("/order/getAllOrderWithoutDriver?current=" + this.current + "&size=" + this.size).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;                            
                });
                request.get("/driver/getAllDriver").then(res=>{
                    this.drivers = res.data;
                });
                request.get("/agreement/getAllAgreement").then(res=>{
                    this.agreements = res.data;
                })
            },
            getCar() {
                request.get("/car/getCarListById?id=" + this.carForm.driver).then(res=>{
                    this.cars = res.data;                          
                })
            },
            openDivide(val) {
                this.dialogVisible = true;
                this.carForm = {};
                this.carForm.baseId = val.id;                
            },
            divide() {
                request.post("/order/divideDriver", this.carForm).then(res=>{
                    if (res.code == 200) {
                        this.$message.success("分配成功");
                    } else {
                        this.$message.error("分配失败");
                    }
                    this.dialogVisible = false;
                    // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
                    const totalPage = Math.ceil((this.total- 1) / this.size); // 总页数
                    this.current = this.current > totalPage ? totalPage : this.current;
                    this.current = this.current < 1 ? 1 : this.current;
                    location.reload();
                })
            },
            del(id) {
                this.$confirm('此操作将永久删除该订单的所有信息, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    request.delete("/order/deleteOrderById?id=" + id).then(res=>{
                      if (res.code === 200) {
                          this.$message({
                            type: 'success',
                            message: '删除成功!'
                          });
                           // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
                          const totalPage = Math.ceil((this.total- 1) / this.size); // 总页数
                          this.current = this.current > totalPage ? totalPage : this.current;
                          this.current = this.current < 1 ? 1 : this.current;
                          this.load();
                      } else {
                          this.$message.error("删除失败");
                      }
                    })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });   
            },
            openView(id) {
                this.dialogVisible2 = true;
                request.get("/order/getOrderInfoById?id=" + id).then(res=>{
                    this.form = res.data;                          
                })
            },
            openUpdate(id) {
                this.dialogVisible3 = true;
                request.get("/order/getOrderInfoById?id=" + id).then(res=>{
                    this.form = res.data;                          
                })
            },
            getInfo() {
                this.form.shipperCustomerCode = '';
                this.form.shippingAddress = '';
                this.form.shipperProjectName = '';
                this.form.shipperLinkMan = '';
                this.form.shipperPhone = '';
                this.form.shipperTelephone = '';
                request.get("/agreement/getAgreementAndCustomerById?id=" + this.form.shipperContractSubject).then(res=>{
                    this.form.shipperCustomerCode = res.data.carNum;
                    this.form.shippingAddress = res.data.address;
                    this.form.shipperProjectName = res.data.title;
                    this.form.shipperLinkMan = res.data.name;
                    this.form.shipperPhone = res.data.secondPhone;
                    for (let i = 0; i < res.data.contactData.length; i ++) {
                        if (res.data.contactData[i].isUseful != "无效" && res.data.contactData[i].nums != this.form.shipperPhone) {
                            this.form.shipperTelephone = res.data.contactData[i].nums;
                            break;
                        }
                    }
                })
            },
            save() {
                request.post("/order/updateOrderById", this.form).then(res=>{
                    if (res.code == 200) {
                        this.$message.success("修改成功");
                        this.dialogVisible3 = false;
                        this.load();
                    } else {
                        this.$message.error("修改失败");
                    }
                })
            }
        },
        mounted() {
            this.load();
        },
        data() {
          return {
            tableData: [],
            current:1,
            size:2,
            total:0,
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible3: false,
            carForm: {
              driver:'',
              car:'',
              baseId:''
            },
            drivers: [],
            cars: [],
            form:{},
            agreements: []
          }
        }
      }
</script>

<style scoped>

</style>
